
import styled from 'styled-components';
import React, { CSSProperties, useState, useEffect } from 'react';
import { Button, Modal, Select } from 'antd';
import { PlusOutlined, TableOutlined } from '@ant-design/icons';

import { CategoryTree, CategoryTreeNode } from '../tree';
import { AddDataSourceDialog } from './add-data-source';
import { DataSource, dataSourceGetObjectTree, DataSourceDomainConnector } from '../../services';
import { DataSourceSelect } from './data-source-select';

export interface DataCategoryListProps {
    style?: CSSProperties;
    version?: number;
    onChange: (dataCategory: string | null, dataSource: DataSource | null) => Promise<void>
}

export const DataCategoryList: React.FC<DataCategoryListProps> = (props) => {

    const [dataSource, setDataSource] = useState<DataSource | null>(null);

    const [dataCategory, setDataCategory] = useState<string | null>(null);

    // domain,object,object
    const [data, setData] = useState<Array<CategoryTreeNode>>([]);

    const [connector, setConnector] = useState<DataSourceDomainConnector | null>(null);

    useEffect(() => {
        //刷新数据
    }, [props.version]);

    useEffect(() => {
        props.onChange(dataCategory, dataSource);
    }, [dataSource, dataCategory]);

    const queryData = async (dataSource: DataSource) => {
        let items: Array<CategoryTreeNode> = await dataSourceGetObjectTree(dataSource, (item) => {
            return {
                title: item.name,
                key: item.identifier,
                icon: <TableOutlined />,
                isLeaf: !(item.data_is_type === undefined || item.data_is_type === 1),
                children: [],
            } as CategoryTreeNode;
        });
        console.log(items);
        setData(items);
    };

    useEffect(() => {
        if (!dataSource) return;
        //
        queryData(dataSource);
    }, [dataSource]);

    return (
        <Container style={props.style}>
            <DataSourceSelect
                style={{
                    height: '45px'
                }}
                onChange={async (dataSource) => {
                    console.log(dataSource);
                    setDataSource(dataSource);
                }}></DataSourceSelect>
            <CategoryTreeContainer>
                <CategoryTree
                    style={{
                    }}
                    categories={data}
                    onLoadData={async (node) => {
                        let newData = [];
                        for (let i = 0; i < data.length; i++) {
                            let domain: any = data[i];
                            for (let j = 0; j < domain.children.length; j++) {
                                let item = domain.children[j];
                                if (item.key === node.key) {
                                    //从数据源中获取到
                                    let connector = new DataSourceDomainConnector(dataSource);
                                    item.children = (await connector.queryValues(node.key)).map((objItem: any, index) => {
                                        return {
                                            title: objItem.name,
                                            key: objItem.object_identifier,
                                            icon: <TableOutlined />,
                                            children: [],
                                            isLeaf: true,
                                        };
                                    });
                                }
                            }
                            newData.push(domain);
                        }
                        console.log(newData);
                        setData(newData);
                    }}
                    onSelect={async (key, item) => {
                        setDataCategory(key);
                    }}
                ></CategoryTree>
            </CategoryTreeContainer>
        </Container>
    );

}

const Container = styled.div`
    height: 100%;
    width: 100%;
    display: flex;
    flex-direction: column;
`;
const CategoryTreeContainer = styled.div`
    flex:1;
    width: 100%;
    overflow: auto;
`;